import React, { useState, useEffect } from 'react'
import { AntOutline, EnvironmentOutline, RightOutline, LeftOutline } from 'antd-mobile-icons'
import { CartO } from '@react-vant/icons';

import axios from 'axios'
import { Button } from 'antd-mobile'

import { useNavigate } from 'react-router-dom';


export default function Showding() {
  let history=useNavigate()
  let [orderlis, setorderlis] = useState([])

  let [shopplis, setlikeshopp] = useState([])

  // 获取商品信息
  let getShopp = async () => {
    let val = await axios.get("http://127.0.0.1:3000/xuweixin/messshow")
    setlikeshopp(val.data.datas)
    console.log(val.data.datas)
  }

  let getMess = async () => {
    let val = await axios.get("http://127.0.0.1:3000/xuweixin/getorder", { params: { order_id: JSON.parse(localStorage.getItem("order_id")) } })
    setorderlis(val.data.datas)
  }

  useEffect(() => {
    getMess()
    getShopp()
  }, [])

  return (
    <div style={{ height: "100%", background: "#f7f7f7" }}>
      <div style={{ height: "50px", background: "white", position: "sticky", top: "0px", display: "flex", justifyContent: "space-around", alignItems: "center" }}>
        <span style={{ marginLeft: "-138px"}}><LeftOutline
          onClick={()=>{
            history("/")
          }}
        ></LeftOutline></span>
        <span style={{ fontSize: "16px", marginLeft: "-159px" }}><b>待收货</b></span>
      </div>
      <iframe 
      src={`http://127.0.0.1:5500/public/maps.html?time=${orderlis?.order_time}&address=${JSON.parse(localStorage.getItem("addresslis")).filter(item=>item._id==JSON.parse(localStorage.getItem('adminmess'))._id).find(flag=>flag.selecteds==true).address}&house=${JSON.parse(localStorage.getItem("addresslis")).filter(item=>item._id==JSON.parse(localStorage.getItem('adminmess'))._id).find(flag=>flag.selecteds==true).home}
        `}
      width={"100%"} height={"350px"}></iframe>

      <div style={{ width: "95%", height: "145px", background: "white", borderRadius: "13px", margin: "0 auto" }}>
        <img 
          style={{width:"368px",height:"143px"}}
        src="https://t7.baidu.com/it/u=2829454632,2861690742&fm=193"></img>
      </div>
      {/* 配送时间 */}
      <div style={{ width: "95%", height: "100px", background: "white", borderRadius: "13px", margin: '0 auto', marginTop: "15px", overflow: "hidden" }}>
        <p style={{ display: "flex", justifyContent: "space-between", marginTop: "11px" }}>
          <span style={{ marginLeft: "10px" }}>预约地址:</span>
          <span>{orderlis?.order_time?.split(" ")[0].split("/")[1] + "月" + orderlis?.order_time?.split(" ")[0].split("/")[2] + "日"}</span>
        </p>

        <p style={{ display: "flex", justifyContent: "space-between", marginTop: "30px" }}>
          <span style={{ marginLeft: "10px" }}>收货地址:</span>
          <span>{orderlis?.order_address}<br></br>
            {JSON.parse(localStorage.getItem("addresslis")).find(item => item.phone == orderlis?.order_phone)?.home}
            {JSON.parse(localStorage.getItem("addresslis")).find(item => item.phone == orderlis?.order_phone)?.homenum}
          </span>
        </p>
      </div>

      {/* 详细商品展示 */}
      <div style={{ width: "95%", height: "300px", background: "white", margin: "0 auto", marginTop: "20px" }}>
        <div style={{ height: "150px", borderBottom: "1px solid #f8f8f8", overflow: "auto" }}>
          {
            orderlis?.shopArr?.map(item => (
              <div key={item._id} style={{ display: "flex", justifyContent: "space-between", borderBottom: "1px solid #f2f2f2" }}>
                <p style={{ marginLeft: "10px" }}>
                  <img src={item.img} style={{ width: "70px", height: "70px" }}></img>
                </p>
                <p style={{ display: "flex", flex: "10%", flexDirection: "column", justifyContent: "space-evenly", marginLeft: "24px" }}>
                  <span>{item.name}{item.mess}</span>
                  <span>单价:{item.price}</span>
                  <span>数量:{item.buynum}</span>
                </p>
                <p style={{ display: "flex", flexDirection: "column", justifyContent: "space-evenly" }}>
                  <span>￥{item.price * item.buynum}</span>
                  <span><Button style={{ borderRadius: "10px", height: "40px", fontSize: "11px" }}>加入购物车</Button></span>
                </p>
              </div>
            ))
          }
        </div>

        <div style={{ height: "150px", display: "flex", flexDirection: "column", justifyContent: 'space-evenly' }}>
          <p style={{ display: "flex", justifyContent: "space-between" }}>
            <span style={{ marginLeft: "10px" }}>商品金额:</span>
            <span style={{ marginRight: "10px" }}>￥{orderlis?.shopArr?.reduce((sum, item) => { return sum += item.price * item.buynum }, 0)}</span>
          </p>
          <p style={{ display: "flex", justifyContent: "space-between" }}>
            <span style={{ marginLeft: "10px" }}>配送费:</span>
            <span style={{ marginRight: "10px" }}>￥0.00(包邮)</span>
          </p>
          <p style={{ display: "flex", justifyContent: "space-between" }}>
            <span style={{ marginLeft: "10px" }}>应付金额:</span>
            <span style={{ marginRight: "10px", color: "#ff2c2c" }}>￥{orderlis?.shopArr?.reduce((sum, item) => { return sum += item.price * item.buynum }, 0)}</span>
          </p>
        </div>

      </div>

      {/* 发票 */}
      <div style={{
        width: "95%", height: "50px", background: "white", margin: "0 auto", marginTop: "20px", borderRadius: "10px", display: 'flex',
        justifyContent: "space-between",
        lineHeight: "50px"
      }}>
        <span style={{ marginLeft: "10px" }}>发票</span>
        <span style={{ marginRight: "10px" }}>补开发票<RightOutline></RightOutline></span>
      </div>

      {/*订单信息 */}
      <div style={{ width: "95%", height: "100px", background: "white", margin: "0 auto", marginTop: "20px", display: "flex", flexDirection: "column", justifyContent: "space-evenly" }}>
        <p style={{ display: 'flex', justifyContent: "space-between" }}>
          <span style={{ marginLeft: "10px" }}>订单编号:</span>
          <span style={{ marginRight: "10px" }}>{orderlis?.order_id}</span>
        </p>
        <p style={{ display: 'flex', justifyContent: "space-between" }}>
          <span style={{ marginLeft: "10px" }}>下单时间:</span>
          <span style={{ marginRight: "10px" }}>{orderlis?.order_time}</span>
        </p>
        <p style={{ display: 'flex', justifyContent: "space-between" }}>
          <span style={{ marginLeft: "10px" }}>支付方式</span>
          <span style={{ marginRight: "10px" }}>支付宝支付</span>
        </p>
      </div>

      {/* 猜你喜欢 */}

      <div style={{ marginTop: "20px" }}>
        <p style={{ textAlign: "center", height: "50px", lineHeight: "30px", background: "#f7f7f7" }}>--<b>猜你喜欢</b>--</p>
        <div style={{ display: "flex", justifyContent: 'center', flexWrap: "wrap" }}>
          {
            shopplis.map(item => (
              <div style={{ flex: "40%", textAlign: "center", padding: "10px", boxSizing: "border-box" }}>
                <p><img src={item.img} style={{ width: "87%", height: "200px", marginLeft: "10px" }}></img></p>
                <p>{item.name}{item.mess}</p>
                <p>{item.desc.length > 15 ? item.desc.substr(0, 15) + "..." : item.desc}</p>
                <p style={{ textAlign: "left", width: "168px", margin: "0 auto", display: 'flex', justifyContent: "space-between", marginTop: "10px" }}>
                  <span style={{ marginLeft: "10px", color: "#fe4545" }}>￥{item.price}</span>
                  <span style={{ fontSize: "25px", marginRight: "10px" }}>{<CartO 
                    onClick={async ()=>{
                      let adminmess=JSON.parse(localStorage.getItem("adminmess"))
                      let vals=await axios.post("http://127.0.0.1:3000/xuweixin/addcar",{
                            _id:item._id,
                            name:item.name,
                            price:item.price,
                            buynum:1,
                            img:item.img,
                            flag:false,
                            mess:item.specTitle,
                            uid:adminmess._id,
                            shoppid:item._id
                       })
                    }}
                  />}</span>
                </p>
              </div>
            ))
          }
        </div>
      </div>
    </div>
  )
}
